new Vue({
    el: '#app',
    data: function () {
        return {
            // 修改的数据
            updateCust: {
                // 客户编号
                updateCustId:'',
                // 修改客户名称
                updateCustomername: '',
                // 客户信息来源
                updateCustSourceValue: '',
                updateCustSource: [{
                    value: '电话营销',
                    label: '电话营销'
                }, {
                    value: '网络营销',
                    label: '网络营销'
                }, {
                    value: '传销',
                    label: '传销'
                }],
                updateCustIndustryValue: '',
                // 客户所属行业
                updateCustIndustry: [{
                    value: '国企',
                    label: '国企'
                }, {
                    value: '私企',
                    label: '私企'
                }, {
                    value: '其他',
                    label: '其他'
                }],
                // 新增固定电话
                updateCustPhone: '',
                // 新增移动电话
                updateCustMobile: '',
                // 新增客户住址
                updateCustAddress: ''
            },
            // 输入的客户编号
            searchCustomerId: '',
            // 输入的客户名称
            searchCustomerName: '',
            // 被选中的id数组
            selectedIds: [],
            // 表格选中后的数据
            multipleSelection: [],
            // 创建日期相关
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 新增规则
            ruleForm: {
                // 新增客户名称
                insertCustomername: '',
                // 客户信息来源
                insertCustSourceValue: '',
                insertCustSource: [{
                    value: '电话营销',
                    label: '电话营销'
                }, {
                    value: '网络营销',
                    label: '网络营销'
                }],
                insertCustIndustryValue: '',
                // 客户所属行业
                insertCustIndustry: [{
                    value: '国企',
                    label: '国企'
                }, {
                    value: '私企',
                    label: '私企'
                }, {
                    value: '其他',
                    label: '其他'
                }],
                // 新增固定电话
                insertCustPhone: '',
                // 新增移动电话
                insertCustMobile: '',
                // 新增客户住址
                insertCustAddress: ''
            },
            // 对新增和修改进行数据约束
            rules: {
                // 新增客户名称
                insertCustomername: [{
                    required: true,
                    message: '请输入客户名称',
                    trigger: 'blur'
                },
                    {
                        min: 2,
                        max: 5,
                        message: '长度在 2 到 5 个字符',
                        trigger: 'blur'
                    }
                ],
                insertCustSource: [{
                    required: true,
                    message: '请选择客户信息来源',
                    trigger: 'change'
                }],
                insertCustIndustry: [{
                    required: true,
                    message: '请选择客户所属行业',
                    trigger: 'change'
                }],
                insertCustPhone: [{
                    required: true,
                    message: '请输入固定电话',
                    trigger: 'change'
                }],
                insertCustMobile: [{
                    required: true,
                    message: '请输入移动电话',
                    trigger: 'change'
                }],
                insertCustAddress: [{
                    required: true,
                    message: '请输入客户住址',
                    trigger: 'change'
                }]
            },
            currentPage2: 5,
            input1: '',
            input2: '',
            input3: '',
            select: '',
            value: "",
            value2: '',
            // 添加数据对话框是否展示的标记
            dialogVisible: false,
            //修改对话框默认关闭
            updateVisible: false,
            restaurants: [],
            // 原始搜索框选项值
            state1: '',
            options: [{
                value: '电话营销',
                label: '电话营销'
            }, {
                value: '网络营销',
                label: '网络营销'
            }],
            tableData: []
        }
    },
    //加载时调用查询方法
    mounted() {
        // this.restaurants = this.loadAll();
        this.queryCustomer();
    },
    methods: {
        updateCustomer(){

            alert("调用修改方法成功");
        },

        //查询测试
        queryCustomer() {
            var _this = this;
            axios({
                method: "get",
                url: "queryCustomer"
            }).then(resp => {
                _this.tableData = resp.data;
                _this.restaurants = resp.data;
                console.log(_this.restaurants);
                console.log("数据为上")
            })
        },
        // 添加数据
        addCustomer() {
            console.log(this.ruleForm);
            var _this = this;
            // 发送ajax请求，添加数据
            axios({
                method: "post",
                url: "insertCustomer",
                contentType: "application/x-www-form-urlencoded",//post请求才需要添加
                data: _this.ruleForm
            }).then(function (resp) {
                if (resp.data == "success") {
                    //添加成功
                    //关闭窗口
                    _this.dialogVisible = false;
                    // 重新查询数据
                    _this.queryCustomer();
                    // 弹出消息提示
                    _this.$message({
                        message: '恭喜你，添加成功',
                        type: 'success'
                    });

                }
            })
        },

        openFullScreen1() {
            this.fullscreenLoading = true;
            setTimeout(() => {
                this.fullscreenLoading = false;
            }, 1000);
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        deleteCust() {
            console.log(this.selectedIds.length);
            if (this.selectedIds.length == 0) {
                this.$message.error('请选择需要删除的数据');
                return;
            }
            ;
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                //. 发送AJAX请求
                var _this = this;
                // 发送异步请求进行删除
                axios({
                    // method: "post",
                    // url: "deleteCustomer",
                    // data:_this.selectedIds
                    method: "get",
                    url: "deleteCustomer?id=" + _this.selectedIds
                }).then(resp => {
                    if (resp.data == "success") {
                        // 删除成功后重新查询并提示
                        _this.queryCustomer(),
                            _this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            })
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },

        // 表格数据函数
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            //用户点击确认按钮
            //1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可
            for (let i = 0; i < val.length; i++) {
                let selectionElement = val[i];
                this.selectedIds[i] = selectionElement.customerId;
            }
            console.log(this.selectedIds.length);
            console.log(val);
            this.updateCust.updateCustId=val.selectedIds;
        },

        handleSelect(item) {
            console.log(item);
        },
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        }
    }
})
